import Search from "antd/es/transfer/search";
import axios from "axios";
import React,{Component, useEffect, useState} from "react";

export default function L1(){
    const [serch,setSerch]=useState('')
    const [filter,setFilter]=useState([])

    const [data,setData]=useState([])

    const getlist=async()=>{
        await axios.get(`http://localhost:3001/type`).then(res=>{
          
            if(res.status==200){
                setData(res.data)
                setFilter(res.data)
            }
        })
    }

    useEffect(()=>{
        getlist()
    },[])

    const handleSearch=()=>{
        if(!serch.trim()){
            setFilter(data)
            return;
        }
        const filtered=data.filter(item=>
            item.name.toLowerCase().includes(serch.toLowerCase())
        )
        setFilter(filtered)
    }

    const handleKeyPress=(e)=>{
        if(e.key==='Enter'){
            handleSearch()
            console.log('e');
            
        }
    }
    
return(
    <div>
        <div>
            <input value={serch}
            onChange={(e)=>setSerch(e.target.value)}
            onKeyPress={handleKeyPress}
            /><button onClick={handleSearch}>搜搜</button>
        </div>

        {
            filter.map(item=>{
                return(
                    <div key={item.id}>{item.name}</div>
                )
            }) 
        } 
    </div>  
 ) 
}

